<template>
  <CIcon :type="iconType" class="c-icon-arrow"></CIcon>
</template>
<script lang="ts">
export default {
  name: 'CIconArrow'
};
</script>
<script lang="ts" setup>
import { computed, defineProps, withDefaults } from 'vue';
interface CIconArrowProps {
  /**
   * 箭头方向
   */
  direction?: 'left' | 'right' | 'bottom' | 'top';
}
const props = withDefaults(defineProps<CIconArrowProps>(), {
  direction: 'right'
});

const iconType = computed(() => {
  if (props.direction === 'top') return 'c-xian-shang';
  if (props.direction === 'bottom') return 'c-xian-xia';
  if (props.direction === 'left') return 'c-xian-zuo';
  return 'c-xian-you';
});
</script>
<style scoped>
.c-icon-arrow {
  color: #435970;
  font-size: 16px;
}
</style>
